<script setup lang="ts">
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import SideMenu from './left/index.vue'

const isCollapse = ref(false)
</script>

<template>
  <el-container class="layout-container">
    <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
      <el-scrollbar>
        <SideMenu v-model:isCollapse="isCollapse" />
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header class="header">
        <el-button type="text" @click="isCollapse = !isCollapse">
          <el-icon>
            <component :is="isCollapse ? 'Expand' : 'Fold'" />
          </el-icon>
        </el-button>
        <h2>WebGL学习项目</h2>
      </el-header>
      <el-main class="main">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container {
  height: 100vh;
}

.aside {
  background-color: #001529;
  transition: width 0.3s;
}

.el-menu-vertical {
  border-right: none;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.header h2 {
  margin-left: 20px;
  color: #303133;
}

.main {
  background-color: #f5f7fa;
  padding: 20px;
}
</style>./left/SideMenu.vue
